<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Canvas Development</title>

  
  
  <meta name="id" content="64e3dc97-5125-541e-9e84-7f9303e95f05">

  
  <meta name="revisionNumber" content="1">

</head><body>
<p style="font-family: Helvetica,Arial,sans-serif;" class="MsoNormal"><span>In
addition to
standalone web and desktop applications, Facebook also supports
&#8220;Canvas&#8221; applications.<span style="">&nbsp; </span>Canvas applications
are integrated directly
into the user experience on the facebook.com website.<span style="">&nbsp;
</span>Canvas applications have the ability to
display information on a user&#8217;s profile, publish to a user&#8217;s
mini-feeds, and
spread themselves organically through Facebook&#8217;s social network.<span style="">&nbsp; </span>For more information about building a
Facebook Canvas application, read Anatomy of a Facebook Application at
http://developers.facebook.com/anatomy.php.<o:p></o:p></span></p>

<p style="font-family: Helvetica,Arial,sans-serif;"><span>Canvas
applications
can be one of two types.<span style="">&nbsp; </span>FBML Canvas
applications leverage Facebook Markup Language (FBML) to provide a
consistent
integrated user experience for Facebook users.<span style="">&nbsp;
</span>FBML canvas applications essentially are constructed by the
developer
building an FBML &#8220;web service&#8221; that can be called by the Facebook
Server and
return some FBML.<span style="">&nbsp; </span>The Facebook server
will then translate that FBML into HTML to display on a Facebook-hosted
page.<span style="">&nbsp; </span>The second type of Canvas
application is the
IFrame Canvas application.<span style="">&nbsp; </span>In this type
of canvas application, the Facebook web page will simply show an IFrame
linked
to application content hosted by the developer&#8217;s server.<span style="">&nbsp;
</span>This type of canvas application can not
leverage FBML functionality, but does have the advantage of being a
much more
typical web development experience.<o:p></o:p></span><span style="font-size: 11pt; line-height: 115%;"><br>
</span></p>

<p style="font-family: Helvetica,Arial,sans-serif;" class="MsoNormal">The
Facebook Developer Toolkit provides infrastructure for building both
types of
canvas applications. The facebook.web assembly contains
CanvasFBMLBasePage,
CanvasIFrameBasePage, CanvasFBMLMasterPage, and CanvasIFrameMasterPage.
You can
use the BasePages if you want each of your pages to inherit from that
class, or
you can use the MasterPages if you would rather create one master page
which
hosts all of your other pages. No matter which method you choose, these
pages
take care of all of the plumbing needed to successfully host a canvas
application on the Facebook site. See Sections 5.3 and 5.4 below for a
detailed
walkthrough. In addition, you can see samples of both types of Canvas
applications at the below urls.&nbsp; The FBML
sample is a reproduction of Facebook&#8217;s Smiley application.&nbsp; This
shows how to leverage all the various
facebook integration points.&nbsp; We also put
together a document that walks through and describes all of the code.<br>
</p>

<p style="font-family: Helvetica,Arial,sans-serif;" class="MsoNormal">
</p>

<div style="border: 3pt solid rgb(219, 229, 241); padding: 0in; background: rgb(219, 229, 241) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<h2><span class="mw-headline">How an IFrame Canvas Page Works</span><a name="_Toc235256910"></a></h2>
</div>

<h3 id="siteSub">From Facebook Developer Wiki</h3>
<p><o:p>&nbsp;</o:p><br>
<span style="font-family: Helvetica,Arial,sans-serif;">IFrame canvas
pages are pretty straightforward. When the user loads your
application's canvas page on Facebook (say
http://apps.facebook.com/yourapp/somepage</span><span style="font-family: Helvetica,Arial,sans-serif;">),
Facebook renders a
Web page that contains the Facebook chrome surrounding your IFrame. The
IFrame has a URL to your callback URL, and Facebook appends a number of
parameters, like
http://www.yourdomain.com/callbackurl/somepage?fb_sig_in_iframe=1&amp;fb_sig_locale=en_US&amp;fb_sig_time=1221720862.9318&amp;fb_sig_api_key=48102584111d14a9c2e41dd28ea637d7&amp;fb_sig=e656792696ae913c1fc34eeff2d79f75</span>
</p>

<p style="font-family: Helvetica,Arial,sans-serif;">The fb_sig
parameters give more information about which user is logged into your
application, let you verify that the request is indeed coming through
Facebook, and so forth. You can put whatever content you want into the
IFrame and it will be
rendered inside. </p>

<p style="font-family: Helvetica,Arial,sans-serif;">To make your
Facebook application a richer social experience, you'll want to include
some social content like names and profile pictures, and sometimes
you'll want to get some data from the Facebook API to determine which
content to show. To show this content without using FBML, you need to
use the Platform API and
render it yourself. </p>

<p><span style="font-family: Helvetica,Arial,sans-serif;">Here's a
simple diagram of how all this works:</span><br>
<img style="width: 504px; height: 335px;" alt="iframe" src="image/iframe-canvas-page1.png"><br>
</p>

<h2><span class="editsection"></span></h2>

<div style="border: 3pt solid rgb(219, 229, 241); padding: 0in; background: rgb(219, 229, 241) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<h2><span class="mw-headline">How an FBML Canvas Page Works</span></h2>
</div>
<h3 id="siteSub">From Facebook Developer Wiki</h3>

<p style="font-family: Helvetica,Arial,sans-serif;">FBML canvas pages are a little bit different but are still pretty
straightforward. When the user requests your canvas page (say http://apps.facebook.com/yourapp/canvaspage),
Facebook doesn't send back a response immediately; instead, Facebook
sends an HTTP POST to a callback URL on your server (as in http://www.yourserver.com/callbackurl/canvaspage).
The fb_sig parameters get sent as part of the POST rather than as part
of the URL. Facebook then expects your server to return FBML, and then
converts that FBML into HTML and sends it back to the user's browser.
FBML is like HTML, but it lets you include social content inline in
your markup. </p>

<p style="font-family: Helvetica,Arial,sans-serif;">So, if you want to show Facebook data like names and pictures in
FBML, you don't need to make calls to the Facebook API; you can just
use tags like fb:name and fb:profile-pic to reference the data directly. If you want to use data like birthdays,
then you'll still need to use the API, just as you would on an IFrame
page. </p>

<p><span style="font-family: Helvetica,Arial,sans-serif;">Here's a diagram of how an FBML canvas page works. Most of the time,
you won't need to make any API calls, so those arrows are dotted in the
diagram.</span> </p>

<p><img style="width: 560px; height: 181px;" alt="fbml" src="image/fbml-canvas-page.png"><br>
</p>

<span style="font-size: 11pt; line-height: 115%; font-family: Helvetica,Arial,sans-serif;">
</span>
</body></html>